<template>
  <div class="goodsItem" @click="goodsItemClick">
    <img v-lazy="ShowImage" class="item-img" @load="imageLoad"/>
    <div class="item-info">
      <p class="title">{{ gooditem.title }}</p>
      <span class="price">${{ gooditem.price }}</span>
       <i class="iconfont iconshoucang1" ></i>
      <span class="cfav">{{ gooditem.cfav }}</span>
    </div>
  </div>
</template>

<script>
import Bus from '@/utils/bus'
export default {
  name: "goodItem",
  props: {
    gooditem: {
      type: Object,
      default() {
        return {};
      },
    }
  },
  
  computed :{
    ShowImage() {
      return this.gooditem.image || this.gooditem.show.img  
    }
  },
  methods :{
    goodsItemClick(){
      this.$router.push('/classify/'+this.gooditem.iid)
    },
    imageLoad() {
      if(this.$route.path.indexOf('/classify') !== -1) {
        Bus.$emit('goodItemImageLoad')
      }
    }
  }
}
</script>
<style scoped>
.goodsItem {
  width: 48%;
}
.item-img {
  width: 100%;
  background-size: cover;
  border-radius: 7px;
}
.item-info {
  padding: 4px;
  width: 100%;
  text-align: center;
}
.title {
  overflow: hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.price {
  color: pink;
}
.cfav{
  font-size: 5px;
}
.iconfont {
  font-size: 15px;
  margin-left: 4px;
  margin-right: 3px;
}
</style>
